import { Routes, Route, Link, useRoutes, useNavigate } from "react-router-dom"
import Discover from "./pages/discover"
import Playlist from "./pages/discover/playlist"
import Toplist from "./pages/discover/toplist"
import Friend from "./pages/friend"
import Mine from "./pages/mine"
import Page404 from "./pages/page404"

// vue路由属于是config模式

//react中的配置模式和vue基本差不多,二级以后的路径不能加"/"  字段是由path和element

//使用useRoutes这个hook处理路由配置

//在react-router-dom v5中 组件被匹配成功之后会被传入 match location history三个对象

//在react-router-dom v6中 match=>useMatch location=>useLocation

import routes from "./router/index"
import useBeforeEach from "./hooks/useBeforeEach"

let Base = () => {

    //将routes配置交给useRoutes进行处理

    // let Element = useRoutes(routes)
    let Element = useBeforeEach('wf', routes)

    //编程式导航的hook

    let navigate = useNavigate()

    //点击事件的回调

    let handleClick = () => {
        //使用编程式导航

        //编程式导航的几个方法 push go replace forward back

        //当成push来使用

        // navigate("/friend")

        //当成go来使用
        //back
        // navigate(-1)
        //forward
        // navigate(1)

        //传递state,通过hook useLocation来获取传递的state
        // navigate('/friend', { state: { name: '李雷' } })

        // 当成replace来使用
        // navigate('/friend', { replace: true })

        //传递query参数,直接拼接在地址后面就行了

        navigate('/friend?name=韩梅梅')


    }

    return (
        <fieldset>
            <legend>基础路由配置</legend>
            {/* v6版本中,所有的路由api需要套一个Routes */}
            <ul>
                <li>
                    <Link to="/discover">发现</Link>
                </li>
                <li>
                    <Link to="/friend">朋友</Link>
                </li>
                <li>
                    <Link to="/mine">我的</Link>
                </li>
            </ul>
            <button onClick={handleClick}>一个朴实无华的按钮</button>
            {/* v6的版本中默认就是严格匹配模式,这个Route相当于Switch组件 */}
            {/* <Routes> */}
            {/* <Route path="/discover" element={<Discover />}>
                    <Route path="/discover/toplist" element={< Toplist />} />
                    <Route path="/discover/playlist" element={< Playlist />} />
                </Route> */}
            {/* <Route path="/friend" element={<Friend />} />
                <Route path="/mine/:id" element={<Mine />} />
                <Route path="*" element={<Page404 />} /> */}

            {Element}
            {/* </Routes> */}
        </fieldset>
    )
}

export default Base